<template>
	<div class="subpage supply-container">
		<div class="supply-top-box">
			<div class="supply-top-img">
				<img src="https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190929/1569723403970470.png" alt="">
			</div>
			<p class="supply-title">可供货订单</p>
		</div>
		<div class="supply-bottom-box">
			<van-list
                v-model="loading"
                :immediate-check="false"
                :finished="finished"
                finished-text="已加载全部了哦～"
                @load="onLoadMore"
            >
				<ul class="supply-list" v-if="listData.length > 0">
					<li v-for="(item, index) in listData" :key="index">
						<div class="list-info-left">
							<p>
								<span class="product-name">求购{{item.productName}}</span>
								<span>{{item.farmName}}</span>
							</p>
							<p>
								<span>单价：{{item.salesPrice}}{{item.salesPriceUnit}}</span>
								<span>求购数量：{{item.totalNum}}头</span>
							</p>
							<p>
								<span><span class="product-price color-yellow">{{item.totalPrice}}</span>元/头</span>
								<span>交货期：{{item.deliveryTime}}个月</span>
							</p>
						</div>
						<van-button round class="u-btn-default u-bg-gradient-light supply-btn" @click="supplyFn(item.id, item.totalNum)">供货</van-button>
					</li>
				</ul>
			</van-list>

			<div class="no-data-info" v-if="showNoInfo">
				<img src="@/assets/img/balance_empty.png" alt="">
				<p>暂无可供货订单~</p>
			</div>
		</div>

		<router-view/>
	</div>
</template>

<script>
import { List } from 'vant';
export default {
	components: {
        [List.name]:List
    },
	data() {
		return {
			listData: [],
			pageIndex: 1,
			pageSize: 10,
			showNoInfo: false,
            loading: false,
            finished: false,
		}
	},
	created() {
		this.getListData()
	},
	methods: {
		getListData() {
			let getData = {
				pgCt: this.pageIndex,
				pgSz: this.pageSize
			}
			let url = this.pageIndex > 1 ? '/api/supply/list?noLoading' : '/api/supply/list';
			this.$api.get(url, getData)
				.then((res) => {
					this.showNoInfo = res.data.total > 0 ? false : true;
                    // if(res.data.records.length > 0){
                    //     res.data.records.forEach((item) => {
                    //         item.actTime = this.$tool.dateFormat(item.actTime, 3)
                    //     })
                    // }
                    this.listData = this.listData.concat(res.data.records)
                    if(this.pageIndex > 1 && res.data.records.length < this.pageSize){
                        this.finished = true;
                    }
				})
		},
		supplyFn(id, applyNum) {
			this.$router.push({
				name: 'supplyDetail',
				query: {
					id: id,
					applyNum: applyNum
				}
			})
		},
		onLoadMore() {
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getListData()
                // 加载状态结束
                this.loading = false;
            }, 500);
        },
	}
}
</script>

<style lang="scss" scoped>
	.supply-container {
		.supply-top-box {

			.supply-top-img {
				width: 100%;
				height: 157px;
				img {
					width: 100%;
					height: 157px;
					object-fit: cover;
				}
			}
			.supply-title {
				width: 100%;
				height: 48px;
				line-height: 48px;
				padding: 0 16px;
				box-sizing: border-box;
				background-color: #fff;
				color: #344047;
				font-weight: 500;
				font-size: 18px;
				border-bottom: 1px solid #f2f2f2;
			}
		}
		.supply-bottom-box {
			width: 100%;
			height: calc(100% - 205px);
			overflow-y: auto;
			.supply-list {
				width: 100%;
				li {
					width: 100%;
					padding: 16px;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;
					border-bottom: 1px solid #f2f2f2;
					.list-info-left {
						flex: 1;
						p {
							display: flex;
							justify-content: space-between;
							// font-size: 12px;
							color: #969C9E;
							.product-name {
								font-size: 16px;
								color: #344047;
							}
							.product-price {
								margin-right: 4px;
								font-size: 14px;
							}
						}
						p:nth-of-type(1),
						p:nth-of-type(2) {
							margin-bottom: 12px;
						}
					}
					.supply-btn {
						width: 68px;
						height: 28px;
						margin-left: 20px;
						line-height: 28px;
						font-size: 14px;
						box-shadow: none;
					}
				}
			}
		}
		.no-data-info {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            img{
                width: 162px;
                height: 162px;
                margin: -80px auto 14px;
            }
            p {
                color: #969C9E;
            }
        }
	}
</style>